<!--
 * @Author: lee
 * @Date: 2024-01-19 16:36:26
 * @LastEditors: lee
 * @LastEditTime: 2024-01-23 17:24:15
 * @Description: file content
-->
<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import rateStar from "@/components/RateStar";
let result = [
  { name: "重型一分厂", value: 5 },
  { name: "叶片分厂", value: 4 },
  { name: "金工分厂", value: 4 },
  { name: "焊接分厂", value: 4 },
  { name: "工业透平", value: 3 },
  { name: "重型二分厂", value: 3 },
  { name: "隔板分厂", value: 3 },
  { name: "隔板分厂1", value: 3 },
  { name: "隔板分厂2", value: 3 },
  { name: "隔板分厂3", value: 3 },
  { name: "隔板分厂4", value: 3 }
];
const classOption={
          direction: 0
        }
</script>

<template>
  <div class="rightBox3 baseBorderBg">
    <div class="baseBoxHeader">设备能源管理综合考评</div>
    <div class="baseBoxBody">
      <vue3-seamless-scroll :list="result"  :limit-scroll-num="6">
        <ul class="rank-list">
          <li v-for="(item, index) in result" :key="index" class="list-item">
            <div class="left">
              <span class="rank-num">{{index+1}}</span>
              <span class="rank-name">{{item.name}}</span>
            </div>
            <div class="right">
              <rate-star :stars="item.value"></rate-star>
            </div>
          </li>
        </ul>
      </vue3-seamless-scroll>
      <!-- <div class="rank-list">
        <div class="list-item" v-for="(i,k) in result" :key="k">
          <div class="left">
            <span class="rank-num">{{k+1}}</span>
            <span class="rank-name">{{i.name}}</span>
          </div>
          <div class="right">
            <rate-star :stars="i.value"></rate-star>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
.rightBox3 {
  background-color: #06133d;
  // padding: 15px;
  .baseBoxBody {
    padding: 15px;
  }
  .rank-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      padding: 0 15px;
      color: #ffffff;
      color: #fff;
      margin-bottom: 10px;
      background-image: linear-gradient(
        0deg,
        #1a3e6b 0%,
        rgba(26, 62, 107, 0.2) 100%
      );
      border-bottom: 2px solid #558de1;
      .left {
        display: flex;
      }
      .rank-num {
        width: 18px;
        height: 18px;
        background-color: #0b2b5a;
        border: solid 1px #558de1;
        color: #c1f4ff;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .rank-name {
        margin-left: 20px;
        font-size: 14px;
      }
    }
  }
}
</style>